<template>
    <view class="container">
        <view class="order-goods">
            <view class="h">退款商品</view>
            <view class="goods">
                <view class="item" v-for="(item, index) in orderGoods" :key="index">
                    <view class="img">
                        <image :src="item.picUrl"></image>
                    </view>

                    <view class="info">
                        <view class="t">
                            <text class="name">{{ item.goodsName }}</text>
                            <text class="number">x{{ item.number }}</text>
                        </view>
                        <view class="attr">{{ item.specifications }}</view>
                        <view class="price">￥{{ item.price }}</view>
                    </view>
                </view>
            </view>
        </view>

        <van-cell-group title="订单明细">
            <van-cell title="商品总价" :value="' ￥' + orderInfo.goodsPrice + '元'" />
            <van-cell title="    运费" :value="' ￥' + orderInfo.freightPrice + '元'" />
            <van-cell title="    优惠" :value="'-￥' + orderInfo.couponPrice + '元'" />
            <van-cell title="订单实付" :value="' ￥' + orderInfo.actualPrice + '元'" />
        </van-cell-group>

        <van-cell-group title="操作">
            <van-field :value="aftersale.typeDesc" label="退款类型" placeholder="请选择" input-align="right" required clickable @tap.native="showTypePicker" />
            <van-field :value="aftersale.reason" label="退款原因" placeholder="请输入" @change="onReasonChange" input-align="right" required clearable />
            <van-cell title="退款金额" :value="'￥' + aftersale.amount + '元'" label="不可修改，即订单实付- 运费" required />
            <van-field label="退款说明" :value="aftersale.comment" placeholder="请输入" type="textarea" input-align="right" autosize />
            <van-cell title="上传凭证" label="最多上传三张">
                <van-uploader :file-list="fileList" @after-read="afterRead" @delete="deleteImage" :max-count="3" preview-size="50px" />
            </van-cell>
        </van-cell-group>

        <van-button type="danger" @click="submit" block>申请售后</van-button>

        <van-popup :show="showPicker" position="bottom">
            <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
export default {
    data() {
        return {
            orderId: 0,

            orderInfo: {
                goodsPrice: '',
                freightPrice: '',
                couponPrice: '',
                actualPrice: ''
            },

            orderGoods: [],

            aftersale: {
                pictures: [],
                orderId: '',
                amount: '',
                comment: '',
                reason: '',
                type: '',
                typeDesc: ''
            },

            columns: ['未收货退款', '不退货退款', '退货退款'],
            contentLength: 0,
            fileList: [],
            showPicker: false
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        this.setData({
            orderId: options.id
        });
        this.getOrderDetail();
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getOrderDetail: function () {
            uni.showLoading({
                title: '加载中'
            });
            setTimeout(function () {
                uni.hideLoading();
            }, 2000);
            let that = this;
            util.request(api.OrderDetail, {
                orderId: that.orderId
            }).then(function (res) {
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        orderInfo: res.data.orderInfo,
                        orderGoods: res.data.orderGoods,
                        'aftersale.orderId': that.orderId,
                        'aftersale.amount': res.data.orderInfo.actualPrice - res.data.orderInfo.freightPrice
                    });
                }
                uni.hideLoading();
            });
        },

        deleteImage(event) {
            const { fileList = [] } = this;
            fileList.splice(event.detail.index, 1);
            this.setData({
                fileList: fileList
            });
        },

        afterRead(event) {
            const { file } = event.detail;
            let that = this;
            const uploadTask = uni.uploadFile({
                url: api.StorageUpload,
                filePath: file.path,
                name: 'file',
                success: function (res) {
                    var _res = JSON.parse(res.data);
                    if (_res.errno === 0) {
                        var url = _res.data.url;
                        that.aftersale.pictures.push(url);
                        const { fileList = [] } = that;
                        fileList.push({
                            ...file,
                            url: url
                        });
                        that.setData({
                            fileList: fileList
                        });
                    }
                },
                fail: function (e) {
                    uni.showModal({
                        title: '错误',
                        content: '上传失败',
                        showCancel: false
                    });
                }
            });
        },

        previewImage: function (e) {
            uni.previewImage({
                current: e.currentTarget.id,
                // 当前显示图片的http链接
                urls: this.files // 需要预览的图片http链接列表
            });
        },

        contentInput: function (e) {
            this.setData({
                contentLength: e.detail.cursor,
                'aftersale.comment': e.detail.value
            });
        },

        onReasonChange: function (e) {
            this.setData({
                'aftersale.reason': e.detail
            });
        },

        showTypePicker: function () {
            this.setData({
                showPicker: true
            });
        },

        onCancel: function () {
            this.setData({
                showPicker: false
            });
        },

        onConfirm: function (event) {
            this.setData({
                'aftersale.type': event.detail.index,
                'aftersale.typeDesc': event.detail.value,
                showPicker: false
            });
        },

        submit: function () {
            let that = this;
            if (that.aftersale.type == undefined) {
                util.showErrorToast('请选择退款类型');
                return false;
            }
            if (that.reason == '') {
                util.showErrorToast('请输入退款原因');
                return false;
            }
            uni.showLoading({
                title: '提交中...',
                mask: true,
                success: function () {}
            });
            util.request(api.AftersaleSubmit, that.aftersale, 'POST').then(function (res) {
                uni.hideLoading();
                if (res.errno === 0) {
                    uni.showToast({
                        title: '申请售后成功',
                        icon: 'success',
                        duration: 2000,
                        complete: function () {
                            uni.switchTab({
                                url: '/pages/ucenter/index/index'
                            });
                        }
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.order-goods {
    margin-top: 20rpx;
    background: #fff;
}

.order-goods .h {
    height: 93.75rpx;
    line-height: 93.75rpx;
    margin-left: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
    padding-right: 31.25rpx;
}

.order-goods .h .label {
    float: left;
    font-size: 30rpx;
    color: #333;
}

.order-goods .h .status {
    float: right;
    font-size: 30rpx;
    color: #b4282d;
}

.order-goods .item {
    display: flex;
    align-items: center;
    height: 192rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
}

.order-goods .item:last-child {
    border-bottom: none;
}

.order-goods .item .img {
    height: 145.83rpx;
    width: 145.83rpx;
    background: #f4f4f4;
}

.order-goods .item .img image {
    height: 145.83rpx;
    width: 145.83rpx;
}

.order-goods .item .info {
    flex: 1;
    height: 145.83rpx;
    margin-left: 20rpx;
}

.order-goods .item .t {
    margin-top: 8rpx;
    height: 33rpx;
    line-height: 33rpx;
    margin-bottom: 10.5rpx;
}

.order-goods .item .t .name {
    display: block;
    float: left;
    height: 33rpx;
    line-height: 33rpx;
    color: #333;
    font-size: 30rpx;
}

.order-goods .item .t .number {
    display: block;
    float: right;
    height: 33rpx;
    text-align: right;
    line-height: 33rpx;
    color: #333;
    font-size: 30rpx;
}

.order-goods .item .attr {
    height: 29rpx;
    line-height: 29rpx;
    color: #666;
    margin-bottom: 25rpx;
    font-size: 25rpx;
}

.order-goods .item .price {
    display: block;
    float: left;
    height: 30rpx;
    line-height: 30rpx;
    color: #333;
    font-size: 30rpx;
}
</style>
